A warm, professional foundation built to make the work quick to scan and easy to remember — coral as the one accent that sticks, muted colour used with intent, and a duotone icon language all its own.
Palette & tone derived from shaivy.framer.website, mixed with the portfolio's deeper editorial range.
A warm cream canvas keeps things light and scannable. Coral is the single signature accent; indigo, pine and gold are supporting voices used sparingly — a little colour here and there, never loud.
One workhorse typeface, varied by weight and size, with a handwritten voice for personal asides. Calm hierarchy, generous sizing, easy to scan.
The signature: two-tone "duotone" icons in a single coral hue — a solid base shape at 40% opacity, with the key detail at full strength. Memorable, warm, unmistakably yours.
Soft pill buttons, category tags, and three card treatments that prove colour can live "here and there" without ever getting loud.
White surface, hairline border, coral icon. The default for most content.
Default →A single supporting colour, deep and quiet. For one feature tile.
Accent →Deep warm ink for a single dramatic moment — not the whole page.
Feature →The why behind the system — four rules that keep every screen memorable, professional and quick to scan.
Generous space, clear hierarchy, short lines. A recruiter should grasp each section in seconds.
Cream and ink carry the page; coral is the one accent that sticks. Other hues only tag or highlight.
Rounded forms, duotone icons and a handwritten voice keep it human and memorable.
Soft lifts and fades, never flashy. Movement guides attention, it doesn't demand it.
A second layer that sits on the foundation — every block a UX case study needs, mapped to the narrative arc. The kit runs on a warm-dark canvas (the reading surface for long-form work) while keeping the same coral accent, Bricolage type and duotone icons. One stylesheet, one wrapper class.
Recruiters scan before they read, so the kit is built to surface signal fast: results-first impact blocks, research shown as insight → what it changed, decisions framed as considered / chose / why, and an honest reflection to close. Each component is a drop-in — fill the copy, drop the screens, and the story assembles itself.
Wrap a page in class="csk" and link casestudy-kit.css. The full gallery documents all 29 components in context, with the class names to copy.
Open the full kit →A single sentence that says what it is and why it matters — with one idea carrying the accent.